<script setup lang="ts">

import Card from "@/components/Card.vue";
// import {onMounted, ref} from "vue";
//
// const x = ref(0);
// const y = ref(0);
//
// function update(e) {
//   x.value = e.pageX;
//   y.value = e.pageY;
// }
//
// onMounted(() => window.addEventListener("mousemove", update));
import {useMouse} from '../../common/mouse.ts';

const {x, y} = useMouse();

import {useFetch} from '../../common/fetch.ts';
import {type Ref, ref, watchEffect} from "vue";

const word = ref('');
const data: Ref<unknown> = ref('');
const error:Ref<unknown> = ref('');
watchEffect(async () => {
  if (word.value) {
    const ret = useFetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${word.value}`, {});
    data.value = ret.data;
    error.value = ret.data;
  }
});


</script>

<template>
  <card title="组合式函数复用">
    <p>x: {{ x }},y {{ y }}</p>
  </card>

  <card title="fetch demo">
    <p>666</p>
    <p>{{ word }}</p>
    <input type="text" v-model="word">
    <p>{{ data }}</p>
    <p>{{ error }}</p>
  </card>
</template>

<style scoped>

</style>